<template>
  <div class="app-container">

    <div class="top-main">
    <el-form  class="top-form-fl" :model="param" label-width="auto" :inline="true">
      <el-form-item label="提/还箱城市" style="width: 400px;"> 
        <InputBox :inputVal1="param.boxStartCity" :inputVal2="param.boxBackCity" :inputBoxConfig="inputBoxConfig"  @inputChange="inputChange"></InputBox>
      </el-form-item>
      <el-form-item label="箱型">
        <el-select v-model="param.boxType" style="width:100%" clearable placeholder="选择箱型">
          <el-option v-for="item in param.boxTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="箱况">
        <el-select v-model="param.boxCase" style="width:100%" clearable placeholder="选择箱况">
          <el-option v-for="item in param.boxCaseOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="客户">
        <el-input v-model="param.companyName" clearable placeholder="请输入客户名称"/>
      </el-form-item>
      <el-form-item label="租箱编号">
        <el-input v-model="param.releaseNo" clearable placeholder="请输入租箱编号"/>
      </el-form-item>
    </el-form>
    <div class="top-from-fr">
        <el-button class="top-Search" @click="getTableData" type="primary">搜索</el-button>
        <el-button class="top-Refresh" @click="handleReSet">重置</el-button>
      </div>   
    </div>
    <div style="margin-top: 15px;">
      <cardRentBox v-for="(item,index) in table.data" :roleType="'xdck'" :key="index" :cardData="item"  :userId="param.companyId" @handleXiaDan="handleXiaDan(item)" @handleChakan="handleChakan(item)" :componentCallSource="'xdck'" style="float:left;">
      </cardRentBox>
    </div>
    <div class="clearFix"></div>
    <el-empty description="当前暂无广告数据" v-if="table.data.length==0" />
     <el-row style="margin-top: 10px;display: flex;justify-content: flex-end; " v-if="table.data.length>0">
      <el-pagination current-page="param.pageNum" page-size="param.pageSize" :pager-count="5"
        :page-sizes="[10, 20, 50, 100]" :total="table.config.total" background
        layout="total,sizes,prev, pager, next,jumper" @size-change="onHandleSizeChange"
        @current-change="onHandleCurrentChange" />
    </el-row>

    <!-- dialog -->
    <el-dialog v-model="param.dialogVisible" title="系统提示" width="500">
      <span>确认删除？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="activDelete">是的</el-button>
          <el-button type="primary" @click="param.dialogVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import cardRentBox from '@/components/cardRentBox'
import InputBox from '@/components/inputBox'
// import czTages from '@/components/chengzhiTags'
import citySelect from '@/components/citySelect'
import { boxEastAgentPage, downPitch, deletePitch, publishPitch } from '@/api/boxRent/indexNew'
import orderInfo from '@/store/modules/order'
import useUserStore from '@/store/modules/user'
import { computed, onActivated, onMounted, reactive, ref } from 'vue';
import {
  Plus,
  Delete,
  Promotion,
  Edit,
  Message,
  Download,
  Upload
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const userStore = useUserStore()

const param = reactive({
  loading: false,
  pageNum: 1,
  pageSize: 10,
  dialogVisible: false,
  stateFilter: { 5: '出租中', 10: '仓库中', 15: '待发布' },
  stateColor: { 5: '#22A86D', 10: '#2158F3', 15: '#2158F3' },
  boxTypeOptions: [ // 5 - 40HQ   10 - 40GP  15 - 20HQ   20 - 20GP
    { value: '5', label: '40HQ', },
    { value: '10', label: '40GP', },
    { value: '15', label: '20HQ', },
    { value: '20', label: '20GP', },
  ],
  boxCaseOptions: [ //5-全新   10-次新  15-适货 20-混提(次新或者适货)
    { value: '15', label: '适货', },
    { value: '10', label: '次新', },
    { value: '20', label: '混提', },
    { value: '5', label: '全新', },
  ],
  beginTotalRentQty: '',
  endTotalRentQty: '',
  boxBackCity: "",
  boxStartCity: "",
  startCityOptions: [],
  backCityOptions: [],
  typeList: []
});


const table = reactive({
  data: [],
  config: {
    isSelection: true,
    isList: false,
    isPagination: true, // 是否分页
    total: 0, // 分页总数
    loading: false
  }
});

const startCityId = (id: string) => {
  param.boxStartCity = id
}
const backCityId = (id: string) => {
  param.boxBackCity = id
}

function handleTypeChange(val: any) {
  // console.log(val)
  param.status = val
  getTableData()
}

async function getTableData() {
  let data = {
    pageNum: param.pageNum,
    pageSize: param.pageSize,
    carryCityId: param.boxStartCity,
    returnCityId: param.boxBackCity,
    boxType: param.boxType,
    boxCondition: param.boxCase,
    releaseNo:param.releaseNo?.trim() || null,
    companyName:param.companyName?.trim() || null
    // beginTotalRentQty: param.beginTotalRentQty - 0 || "",
    // endTotalRentQty: param.endTotalRentQty - 0 || "",
    // status: param.status,
  };
  table.config.loading = true;
  // 列表
  boxEastAgentPage(data).then((res: any) => {
    table.data = JSON.parse(JSON.stringify(res.data.list));
    table.data.forEach((item: any) => {
      let mainFileList = JSON.parse(item.mainFileList);
      item.imgUrl = mainFileList.map((item: any) => {
        return item.url
      })[0];
    });
    console.log('table.data',table.data)
    table.config.total = res.data.total;
  });
  table.config.loading = false;
  //userId
  const user = await userStore.getUser()
  param.companyId = user.companyId
  console.log(param)
}
//重置
function handleReSet() {
  param.boxStartCity = null
  param.boxBackCity = null
  param.boxType = null
  param.boxCase = null
  param.cityList = []
  param.releaseNo = null
  param.companyName = null
  getTableData()
}

//下单
const router = useRouter();
const handleXiaDan = (row: any) => {
  orderInfo().setRowData(row)
  router.push({
    path:'seekRentBoxInfo',
  })
};
const handleChakan = (row: any) => {
    router.push({
    path: '/placingOrder/exportOrder/detaisInfo',
    query: {
      type:2,
      // secondaryEditing: "true", // 是否是下架中编辑
      id: JSON.stringify(row.releaseRentId),
    }
  })
};

//上架/下架  
const tableRef = ref({ multipleSelection: [] })
const selection = computed(() => {
  let ids: any[] = []
  tableRef.value.multipleSelection.map((item: any) => {
    ids.push(item.id)
  })
  return ids
})
const boxPublish = (row: { id: any }, opt: string) => {
  let ids: any[] = []
  if (opt == 'pitch') {
    ids = selection.value
  } else {
    ids = [row.id]
  }
  publishPitch(ids).then(() => {
    getTableData()
  })
};
const boxDown = (row: any, opt: string) => {
  let ids: any[] = []
  if (opt == 'pitch') {
    ids = selection.value
  } else {
    ids = [row.id]
  }
  downPitch(ids).then((res: any) => {
    getTableData()
  })
};

//删除 
let deleteList = ref([])
const isDelete = (row: any, opr: any) => {
  param.dialogVisible = true;
  if (opr == 'pitch') {
    deleteList.value = selection.value
  } else {
    deleteList.value = [row.id]
  }
};
const activDelete = () => {
  let ids = [...deleteList.value]
  deletePitch(ids).then((res: any) => {
    getTableData()
  })
  param.dialogVisible = false;
};


// //分页
// function onTablePageChange(page: { pageNum: number; pageSize: number }) {
//   param.pageNum = page.pageNum;
//   param.pageSize = page.pageSize;
//   getTableData();
// };
// 分页数量
const onHandleSizeChange = (val: number) => {
  param.pageSize = val;
  if(param.pageNum!=1){
    param.pageNum =1
  }else{
     getTableData()
  }
};
const onHandleCurrentChange = (val: number) => {
  param.pageNum = val;
  getTableData()
};
//修改提还箱城市
const inputChange = (val1,val2) => {
  param.boxStartCity = val1 // 提箱城市
  param.boxBackCity = val2 //还箱城市
}
const inputBoxConfig = reactive({
  placeholder1:"请输入出发城市",
  placeholder2:"请输入到达城市",
  multiple:false
})

onActivated(() => {
  getTableData()
})

</script>